{layout name="layout" /}

    <div class="row">
        <div class="col-xs-12">
         <div class="nav-tabs-custom">
            <div class="box">
                <div class="box-header">
                    {if condition="isset($list.post_id)"}
                    <h3 class="box-title">模型修改</h3>
                    {else /}
                    <h3 class="box-title">新增模型</h3>
                    {/if}
                    <!-- <a id="add" class="btn btn-primary" style="float: right;"><i class="fa fa-fw fa-plus"></i>新增字段</a> -->
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                <form id="form" class="form-horizontal ingeAjax" action="{if condition='isset($list.post_id)'}{:url('/home/Posts/goAddModule', 'id='.$list['post_id'])}{else /}{:url('/home/Posts/goAddModule')}{/if}" method="post">
                    <div class="form-group">
                        <label class="col-sm-1 control-label no-padding-right" for="form-field-1"> 名称:</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-group-new col-xs-12 col-sm-12" placeholder="请输入名称" required/ name="post_title" value="{$list.post_title|default=''}">
                        </div>
                        {if condition="!isset($list.post_id)"}
                        <label class="col-sm-1 control-label no-padding-right" for="form-field-1"> 引擎:</label>
                        <div class="col-sm-3">
                            <select  name='post_engine' class='select2 form-group-new col-sm-12'>
                                <option selected>共用</option>
                                <!-- <option>InnoDB</option>
                                <option>MyISAM</option> -->
                            </select>
                        </div>
                        {else/}
                        <label class="col-sm-1 control-label no-padding-right" for="form-field-1"> 引擎:</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-group-new col-xs-12 col-sm-12" placeholder="" disabled="disabled" value="{$list.post_engine|default='公用'}(不可修改)">
                        </div>
                        {/if}
                        <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 标识(字母):</label>
                        <div class="col-sm-2">
                            <input type="text" class="form-group-new col-xs-12 col-sm-12" placeholder="请输入标识" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" required/ name="post_mark" value="{$attr_data.post_mark|default=''}">
                        </div>
                    </div>
                    <table id="posts" class="display" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th>模型ID</th>
                                <th>名称</th>
                                <th>列表显示</th>
                                <th>必填</th>
                                <th>只读</th>
                                <th>输入方式</th>
                                <th>高级</th>
                                <th>操作</th>
                                <th >排序</th>
                            </tr>
                        </thead>
                    </table>
                    <a id="add" class="btn btn-default" ><i class="fa fa-fw fa-plus bigger-110"></i>新增一行</a>
                    <a class="btn btn-primary" data-toggle="modal" data-target="#Modal-attr">高级属性</a>
                    <div class="form-actions">
                        <div class="col-md-offset-3 col-md-9">
                            <input id="front_script" value="{$attr_data.front_script|default=''}" type="hidden" name="front_script">
                            <input id="front_edit" value="{$attr_data.front_edit|default=''}" type="hidden" name="front_edit">
                            <input id="behind_script" value="{$attr_data.behind_script|default=''}" type="hidden" name="behind_script">
                            <input id="behind_edit" value="{$attr_data.behind_edit|default=''}" type="hidden" name="behind_edit">
                            <button class="btn btn-primary" type="submit">
                                  <i class="fa fa-check bigger-110"></i> 保存
                            </button>
                            <button class="btn" type="reset">
                                <i class="fa fa-undo bigger-110"></i> 重置
                            </button>
                        </div>
                    </div>
                </form>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </div>

<div class="modal fade" id="Modal-attr" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <form id="attr-form" class="form-horizontal">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">高级属性设置</h4>
            </div>
            <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 前台显示脚本: </label>
                        <div class="col-sm-9">
                            <textarea id="mfront_script" name="front_script" class="form-group-new  col-xs-12 col-sm-12" >{$attr_data.front_script|default=''}</textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 前台编辑: </label>
                        <div class="col-sm-9">
                            <textarea id="mfront_edit" name="front_edit" class="form-group-new  col-xs-12 col-sm-12" >{$attr_data.front_edit|default=''}</textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 后台显示脚本: </label>
                        <div class="col-sm-9">
                            <textarea id="mbehind_script" name="behind_script" class="form-group-new  col-xs-12 col-sm-12" >{$attr_data.behind_script|default=''}</textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 后台编辑: </label>
                        <div class="col-sm-9">
                            <textarea id="mbehind_edit" name="behind_edit" class="form-group-new  col-xs-12 col-sm-12" >{$attr_data.behind_edit|default=''}</textarea>
                        </div>
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="attr-btn" type="button" class="btn btn-primary" data-dismiss="modal">提交设置</button>
            </div>
        </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div class="modal fade" id="Modal-details" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <form id="details-form" class="form-horizontal">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">详细参数</h4>
            </div>
            <div id="details-modal" class="modal-body">
                <div id="just-add">
                    <input id="hang" value="" type="hidden">
                    
                </div>
                <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 验证规则： </label>
                    <div class="col-sm-9">
                        <input id="mcheck_rule" name="check_rule" value="" type="text" class="form-group-new  col-xs-12 col-sm-12" placeholder="请输入验证规则">
                    </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 长度： </label>
                    <div class="col-sm-9">
                        <input id="mlength" name="length" value="" type="text" class="form-group-new  col-xs-12 col-sm-12" placeholder="请输入长度">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 搜索： </label>
                    <div class="col-sm-9">
                        <input id="msearch" name="search" value="" type="text" class="form-group-new  col-xs-12 col-sm-12" placeholder="请输入关键字">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 默认数据: </label>
                    <div class="col-sm-9">
                        <textarea id="mdefault_data" name="default_data" class="form-group-new  col-xs-12 col-sm-12" placeholder="请输入默认数据"></textarea>
                    </div>
                </div>
            </div>
            </div>
            <div class="modal-footer">
                <button id="close-details" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="details-btn" type="button" class="btn btn-primary" data-dismiss="modal">提交</button>
            </div>
        </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</section>
<!-- /.content -->
{include file="public/base" /}  {include file="public/datatables" /} {include file="public/edit" /} {include file="public/footer" /}
<script type="text/javascript">
    var i = null;
    var list_arr = {};
    var list = {if condition="isset($data)"}{$data}{else /}[];{/if};
    /*
     *新增一行,如需插入空行,可不传参数.
     */
    function addLine() {
        $('#posts').dataTable().fnAddData({"module_id":"","module_name":"","is_list":0,"is_request":0,"is_only_read":0,"input_way":"","sort_way":"","check_rule":"","length":"","search":"","default_data":""});
        $(".select2").select2();
        $('.flat-blue').iCheck({
            checkboxClass: 'icheckbox_flat-blue',
            radioClass: 'iradio_flat-blue'
        });
    }

    /*
     *删除一行,需传入行数
     */
    function subLine(i) {
        var table = $('#posts').DataTable();
        table.row($("#line"+i+"").parents('tr')).remove().draw();
    }

    $('#add').click(function () {
        addLine();
    });

    $(document).ready(function() {
        $('#posts').DataTable( {
            "data": list,
            columns:[
                {
                    "data":"module_id",
                    "render": function(field,type,data){
                        if(i == null){
                            i = 0;
                        }else{
                            i++;
                        }
                        list_arr[data.module_id] = i;
                        return "<input type='text' required/ name='module_id["+i+"]' value='"+data.module_id+"' class='form-group-new'>";
                    }
                },
                {
                    "data":"module_name",
                    "render": function(field,type,data){
                        return "<input type='text' required/ name='module_name["+i+"]' value='"+data.module_name+"' class='form-group-new'>";
                    }
                },
                {
                    "data":"is_list",
                    "render": function(field,type,data){
                        var is_list='';
                        if(data.is_list) {
                            is_list='checked';
                        }
                        return "<input type='checkbox' name='is_list["+i+"]' class='flat-blue' "+is_list+">";
                    }
                },
                {
                    "data":"is_request",
                    "render": function(field,type,data){
                        var is_request='';
                        if(data.is_request) {
                            is_request='checked';
                        }
                        return "<input type='checkbox' name='is_request["+i+"]' class='flat-blue' "+is_request+">";
                    }
                },
                {
                    "data":"is_only_read",
                    "render": function(field,type,data){
                        var is_only_read='';
                        if(data.is_only_read) {
                            is_only_read='checked';
                        }
                        return "<input type='checkbox' name='is_only_read["+i+"]' class='flat-blue' "+is_only_read+">";
                    }
                },
                {
                    "data":"input_way",
                    "render": function(field,type,data){
                        return "<select id='sel"+i+"' name='input_way["+i+"]' class='select2 form-group-new'>{volist name='input_type' id='v'}<optgroup label='---------------'>{volist name='v' id='vo'}<option value='{$vo.id}'>{$vo.name}</option>{/volist}</optgroup>{/volist}</select>";
                    }
                },
                {
                    "data":"module_id",
                    "render": function(field,type,data){
                        $htm = '<a class="btn btn-primary" data-line="'+i+'" onclick="modal('+i+')">详细参数</a>\
                        <div id="btn_detailed_'+i+'" style="display: none;">\
                            <div id="just-add">\
                                <input name="hang" value="'+i+'" type="hidden">\
                                <div class="form-group">\
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 验证规则： </label>\
                                    <div class="col-sm-9">\
                                         <textarea id="mcheck_rule" name="check_rule[]" class="form-group-new  col-xs-12 col-sm-12" placeholder="请输入验证规则">'+data.check_rule+'</textarea>\
                                    </div>\
                                </div>\
                                <div class="form-group">\
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 长度： </label>\
                                    <div class="col-sm-9">\
                                        <textarea id="mlength" name="length[]" class="form-group-new  col-xs-12 col-sm-12" placeholder="请输入长度">'+data.length+'</textarea>\
                                    </div>\
                                </div>\
                                <div class="form-group">\
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 搜索： </label>\
                                    <div class="col-sm-9">\
                                        <textarea id="msearch" name="search[]" class="form-group-new  col-xs-12 col-sm-12" placeholder="请输入关键字">'+data.search+'</textarea>\
                                    </div>\
                                </div>\
                                <div class="form-group">\
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 默认数据: </label>\
                                    <div class="col-sm-9">\
                                        <textarea id="mdefault_data" name="default_data[]" class="form-group-new  col-xs-12 col-sm-12" placeholder="请输入默认数据">'+data.default_data+'</textarea>\
                                    </div>\
                                </div>\
                            </div>\
                        </div>';
                        // console.log($htm);
                        return $htm;
                    }
                },
                {
                    "data":"module_id",
                    "render": function(field,type,data){
                        return "<a id='line"+i+"' onclick='subLine("+i+")'><i class='fa fa-trash-o red control' style='padding-left:10px;'></i></a>";
                    }
                },
                {
                    "data":"sort_way",
                    "render": function(field,type,data){
                        return "<input type='text' style='width:50px;'  name='sort_way[]' value='"+data.sort_way+"' class='form-group-new'>";
                    }
                }
            ],
            "paging": false,
            "bLengthChange": false,
            "bFilter": false,
            "ordering":false,
            "retrieve": true,
            "destroy": true,
            "oLanguage": {
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "对不起，查询不到任何相关数据",
                "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                "sInfoEmtpy": "找不到相关数据",
                "sInfoFiltered": "数据表中共为 _MAX_ 条记录)",
                "sProcessing": "正在加载中...",
                "sSearch": "搜索",
                "sUrl": "", //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt
                "oPaginate": {
                    "sFirst": "第一页",
                    "sPrevious": " 上一页 ",
                    "sNext": " 下一页 ",
                    "sLast": " 最后一页 "
                }
            }
        });

        for(var k = 0,len = list.length;k < len;k++){
            if(list_arr[list[k].module_id]){
                var current_i = list_arr[list[k].module_id];
                $("#sel"+current_i).select2().val(list[current_i].input_way).trigger("change");
            }
        } 

        $(".select2").select2();
        $('.flat-blue').iCheck({
            checkboxClass: 'icheckbox_flat-blue',
            radioClass: 'iradio_flat-blue'
        });
        {if condition="isset($data)"}
        {else /}
        addLine()
        {/if}
    });
    //"高级属性"模态框提交后传递数据给隐藏的input
    $('#attr-btn').click(function () {
        $('#front_script').val($('#mfront_script').val());
        $('#front_edit').val($('#mfront_edit').val());
        $('#behind_script').val($('#mbehind_script').val());
        $('#behind_edit').val($('#mbehind_edit').val());
    });
    //加载"详细参数"模态框
    function modal(i) {
        //表单
        $('#hang').val(i);
        var html = $('#btn_detailed_'+i).find("#just-add").clone();
        console.log(html);
        $("#details-modal").html('');
        $("#details-modal").append(html);
        $('#Modal-details').modal('show');
    }
    $('#Modal-details').on('hide.bs.modal', function () {
        var i = $("#details-modal").find('input[name="hang"]').val();
        $('#btn_detailed_'+i).html('');
        $('#btn_detailed_'+i).append($("#details-modal").find("#just-add").clone());
    });

</script>


</body>
</html>
